import React from 'react';
import { Layout, Menu, Breadcrumb } from 'antd';
import { UserOutlined, LaptopOutlined, NotificationOutlined } from '@ant-design/icons';
import {NavLink} from 'react-router-dom'
import {HashRouter,Route,Redirect} from 'react-router-dom'
import Home from './Home'
import GoodsListManage from './GoodsListManage'
import GoodsAddManage from './GoodsAddManage'
import OrderManage from './OrderManage'
import Supplier from './Supplier'
import Discount from './Discount'
import Activity from './Activity'
import UserManage from './UserManage'
const { SubMenu } = Menu;
const { Header, Content, Footer, Sider } = Layout;
class Main extends React.Component{
  render(){
    //获取屏幕高度
    const winHeight = document.body.clientHeight || document.documentElement.clientHeight;
    return(
       <Layout style={{height:winHeight}}>
    <Header className="header" style={{backgroundColor:'#CED6DE'}}>
      <div className="logo" />
     <img src='./logo.jpg' style={{height:"60px",width:'60px'}}/>
     MK管理系统
    </Header>
    <Content style={{ paddingLeft: '24px' }}>
      <Layout className="site-layout-background" style={{ padding: '24px 0',height:winHeight-64+'px' }}>
        <Sider className="site-layout-background" width={180} style={{height:'100%'}}>
          <Menu
            mode="inline"
            defaultSelectedKeys={['1']}
            defaultOpenKeys={['sub1']}
            style={{ height: '100%' }}>
            <Menu.Item key="1"><NavLink to="/Main/Home"><span><UserOutlined />Home</span></NavLink></Menu.Item>
            <SubMenu key="sub2" title={<span><LaptopOutlined />商品管理</span>} >
              <Menu.Item key="2"><NavLink to="/Main/GoodsListManage">商品列表</NavLink></Menu.Item>
              <Menu.Item key="3"><NavLink to="/Main/GoodsAddManage">发布商品</NavLink></Menu.Item>
            </SubMenu>
             <Menu.Item key="4"><NavLink to="/Main/OrderManage"><span><UserOutlined />订单管理</span></NavLink></Menu.Item>
            <Menu.Item key="5"><NavLink to="/Main/Supplier"><span><UserOutlined />供应商管理</span></NavLink></Menu.Item>
            <SubMenu  key="sub3" title={<span><NotificationOutlined />优惠券和活动</span>}>
              <Menu.Item key="6"><NavLink to="/Main/Discount">我的优惠券</NavLink></Menu.Item>
              <Menu.Item key="7"><NavLink to="/Main/Activity">我的活动</NavLink></Menu.Item>
            </SubMenu>
             <Menu.Item key="8"><NavLink to="/Main/UserManage"><span><UserOutlined />权限管理</span></NavLink></Menu.Item>
          </Menu>
        </Sider>
        <Content style={{ padding: '0 24px', minHeight: 280,height:'100%'}}>
           <Route path='/Main/Home' component={Home}></Route>
           <Route path='/Main/GoodsListManage' component={GoodsListManage}></Route>
           <Route path='/Main/GoodsAddManage' component={GoodsAddManage}></Route>
           <Route path='/Main/OrderManage' component={OrderManage}></Route>
           <Route path='/Main/Supplier' component={Supplier}></Route>
           <Route path='/Main/Discount' component={Discount}></Route>
           <Route path='/Main/Activity' component={Activity}></Route>
           <Route path='/Main/UserManage' component={UserManage}></Route>
           {/*<Route path='/Main/' render={()=><Redirect exact to='/Main/Home'></Redirect>}></Route>*/}
        </Content>
      </Layout>
    </Content>
  </Layout>
    )
  }
}
export default Main;
